<template>
    <div>
        <nut-uploader
            :url="uploadUrl"
            v-model:file-list="fileList"
            :maximum="maxFiles"
            multiple
            @delete="handleDelete"
            @success="handleSuccess"
        ></nut-uploader>
    </div>
</template>

<script>
export default {
    props: {
        uploadUrl: {
            type: String,
            required: true,
        },
        maxFiles: {
            type: Number,
            default: 3,
        },
        initialFiles: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            fileList: [...this.initialFiles],
        };
    },
    methods: {
        handleDelete(index) {
            this.fileList.splice(index, 1);
            this.$emit("update:fileList", this.fileList);
        },
        handleSuccess(res, file) {
            this.fileList.push({ name: file.name, url: res.data.url });
            this.$emit("update:fileList", this.fileList);
        },
    },
};
</script>
